<!-- 商家模块 -->
<template>
	<!-- 我的数据 -->
	<view class="customer">
		<view class="item" @click="checkStatus('/subpages/user-merchant/customers/hall/hall')">
			<icon class="iconfont icon icon-hall">&#xe80b;</icon>
			<text class="label">客户大厅</text>
		</view>
		<view class="item" @click="checkStatus('/subpages/user-merchant/customers/my/my')">
			<icon class="iconfont icon icon-mine">&#xe816;</icon>
			<text class="label">我的客户</text>
		</view>
		<view class="item" @click="checkStatus('/subpages/user-merchant/visitor/visitor')">
			<icon class="iconfont icon icon-visit">&#xe815;</icon>
			<text class="label">空间访客</text>
		</view>
	</view>
	<!-- 管理 -->
	<view class="manage">
		<view class="item" @click="navToCheckLogin('/subpages/user-merchant/order-record/order-record')">
			<icon class="iconfont icon">&#xe817;</icon>
			<text class="title">接单记录</text>
		</view>
		<view class="item" @click="navToCheckLogin(`/subpages/space/space?mid=${$store.getters.userInfo.mid}`)">
			<icon class="iconfont icon">&#xe81a;</icon>
			<text class="title">我的空间</text>
			<text class="mark">分享</text>
		</view>
		<view class="item" @click="navToCheckLogin('/subpages/user-merchant/service/service')">
			<icon class="iconfont icon">&#xe818;</icon>
			<text class="title">服务管理</text>
		</view>
		<view class="item" @click="navToCheckLogin('/subpages/user-merchant/set/set')">
			<icon class="iconfont icon">&#xe819;</icon>
			<text class="title">商户设置</text>
		</view>
	</view>
</template>
<script setup>
	import { getMerchantType } from '@/common/api/user.js';
	import { showModal, showCopy } from '@/common/hooks/useShow.js';
	import { useStore } from 'vuex';
	import config from '@/uni.config.js';
	const store = useStore();
	const emits = defineEmits(['navToCheckLogin']);
	const merchantStatus = {
		new: 1, //新用户
		oldBase: 2, //老用户基本信息未完善
		oldService: 3, //老用户服务信息未完善
		review: 0, //审核中
		reviewSuccess: 1, //审核通过
		reviewFail: 2, //审核失败
	}
	// 检测商户状态
	async function checkStatus(url) {
		if (!store.getters.token) return navToCheckLogin(url);
		const res = await getMerchantType();
		switch (+res.data.trial) {
			case merchantStatus.review:
				showModal({
					content: `您的商户基本信息审核中，暂时不可使用本功能。详询QQ：${config.customer.qq_operate}`,
					confirmText: '我知道了',
					showCancel: false,
					confirm() {
						// showCopy({
						// 	data: config.customer.qq_operate,
						// 	type: 1,
						// 	icon: 'none',
						// 	title: 'QQ号已复制'
						// })
					}
				})
				return;
			case merchantStatus.reviewFail:
				showModal({
					content: `您的商户基本信息审核失败，请修改通过后再使用本功能。`,
					confirmText: '前往修改',
					confirm() {
						uni.navigateTo({
							url: `/subpages/user-merchant/set/base-info/base-info?trial=${merchantStatus.reviewFail}`
						})
					}
				})
				return;
			default:
				navToCheckLogin(url);
				return;
		}
		if (+res.data.isOld > merchantStatus.new) return showModal({
			content: `系统已升级，您需要完善信息后方可继续使用。进QQ群了解更多：${config.customer.qq_product}`,
			confirmText: '前往完善',
			confirm() {
				uni.navigateTo({
					url: +res.data.isOld == merchantStatus.oldBase ? `/subpages/user-merchant/set/base-info/base-info?trial=${merchantStatus.reviewSuccess}` : `/subpages/user-merchant/set/server-info/server-info`
				})
			},
			cancel() {
				// showCopy({
				// 	data: config.customer.qq_product,
				// 	type: 1,
				// 	icon: 'none',
				// 	title: 'QQ群号已复制'
				// })
			}
		})
	}
	// 检测登录跳转
	function navToCheckLogin(url) {
		emits('navToCheckLogin', url);
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	$w:694rpx;
	@mixin common {
		width: $w;
		margin: 0 auto 28rpx;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .08);
		border-radius: 18rpx;
		background-color: #fff;
	}
	.customer {
		@include common;
		@include flex;
		margin-top: -80rpx;
		.item {
			@include flex(column);
			width: 33.33%;
			padding: 40rpx 0;
			.icon {
				font-size: 78rpx;
				&-hall {
					color: #E4736F;
				}
				&-mine {
					color: #10C55B;
				}
				&-visit {
					color: #429EFD;
				}
			}
			.label {
				margin: 20rpx 0 0;
				font-size: 24rpx;
				color: #444;
			}
		}
	}
	.manage {
		@include common;
		@include flex(row, space-around);
		.item {
			position: relative;
			@include flex(column);
			width: 25%;
			padding: 42rpx 0;
			.icon {
				font-size: 44rpx;
				color: #333;
			}
			.title {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #333;
			}
			.mark {
				position: absolute;
				top: 20rpx;
				right: 8rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 12rpx;
				border-radius: 18rpx 18rpx 18rpx 0;
				background-color: $color;
				font-size: 20rpx;
				color: #fff;
			}
		}
	}
</style>
